import React, { Component } from 'react';
import { NavBar, Icon, Grid, ListView } from 'antd-mobile';
import Banner from './../../components/silbagbanner';
// import { getBanners, getfenlan } from './../../api'
import style from './index.module.scss'
import { Link } from 'react-router-dom';
import axios from 'axios'
// import { Router, Link } from 
const data = [
  {
    title: 'Meet hotel',
    des: '不是所有的兼职汪都需要风吹日晒',
  },
  {
    title: 'McDonald\'s invites you',
    des: '不是所有的兼职汪都需要风吹日晒',
  },
  {
    title: 'Eat the week',
    des: '不是所有的兼职汪都需要风吹日晒',
  },
];

const NUM_ROWS = 2;
let pageIndex = 0;

function genData(pIndex = 0) {
  const dataBlob = {};
  for (let i = 0; i < NUM_ROWS; i++) {
    const ii = (pIndex * NUM_ROWS) + i;
    dataBlob[`${ii}`] = `row - ${ii}`;
  }
  // console.log(dataBlob)
  return dataBlob;
  
}
class Com extends Component {
  constructor(props) {
    super(props);
    const dataSource = new ListView.DataSource({
      rowHasChanged: (row1, row2) => row1 !== row2,
    });
    console.log(dataSource)
    this.state={
      bannerlist: [],
      fenlanlist: [],
      dataSource,
      isLoading: true
    }
  }
  
  componentDidMount() {
    axios.get('http://localhost:9000/banner').then(res => {
      this.setState({
        bannerlist: res.data.data.slideshow
      })
  })

  axios.get('http://localhost:9000/subject').then(res => {
      this.setState({
        fenlanlist: res.data.data
      })
  })

    setTimeout(() => {
      this.rData = genData();
      this.setState({
        dataSource: this.state.dataSource.cloneWithRows(this.rData),
        isLoading: true,
      });
      
    // console.log(this.state.dataSource)
    }, 600);
  }
  onEndReached = (event) => {
    // load new data
    // hasMore: from backend data, indicates whether it is the last page, here is false
    if (this.state.isLoading && !this.state.hasMore) {
      return;
    }
    console.log('reach end', event);
    this.setState({ isLoading: true });
    setTimeout(() => {
      this.rData = { ...this.rData, ...genData(++pageIndex) };
      this.setState({
        dataSource: this.state.dataSource.cloneWithRows(this.rData),
        isLoading: false,
        hasMore:true
      });
    }, 1000);
  }

  render() {
    const separator = (sectionID, rowID) => (
      <div
        key={`${sectionID}-${rowID}`}
        style={{
          backgroundColor: '#F5F5F9',
          height: 8,
          borderTop: '1px solid #ECECED',
          borderBottom: '1px solid #ECECED',
        }}
      />
    );
    let index = data.length - 1;
    const row = (rowData, sectionID, rowID) => {
      console.log(rowID)
      if (index < 0) {
        index = data.length - 1;
      }
      const obj = data[index--];
      console.log(obj)
      return (
        <div key={rowID} style={{ padding: '0 15px' }}>
          <div style={{ display: "flex", padding: '15px 0', fontSize: '0.14rem',fontWight:"bold",
            color:"rgba(51,51,51,1)" }}>
            <div style={{ lineHeight: 1 }}>
              <div style={{ marginBottom: '8px', fontWeight: 'bold' }}><span style={{ padding: '0 0.05rem',fontSize: '30px', color: '#FF6E27' }}>{rowID}</span>{obj.title}</div>
              <div>{obj.des}</div>
            </div>
          </div>
        </div>
      );
    };
    const data1 = [
      {
        icon:'/images/游记攻略.png',
        text: '精选游记',
        key: '1'
      },
    {
      icon:'/images/国家指南.png',
      text: '国家指南',
      key: '2'

    },
    {
      icon:'/images/签证.png',
      text: '签证',
      key: '3'
    },
    {
      icon:'/images/行程路线.png',
      text: '行程路线',
      key: '4'
    },
    {
      icon:'/images/自由行.png',
      text: '自由行',
      key: '5'
    },
    {
      icon:'/images/特价机票.png',
        text: '特价机票',
        key: '6'
    },
    {
      icon:'/images/结伴.png',
      text: '结伴',
      key: '7'
    },
    {
      icon:'/images/问答.png',
      text: '问答',
      key: '8'
    },
    ]
    return (
      <div className='box'>
        {/* 头部 */}
        <header className='header'>
          <NavBar
            mode="light"
            // icon={<Icon type={require('./../../left.svg')} />}
            icon={ <span className="iconfont icon-fanhui" style={{ fontSize: '0.23rem', color: '#00B145' }}></span>}
            onLeftClick={() => {
              this.props.history.go(-1)
            }}
            rightContent={[
              <Icon key="0" type="ellipsis" color='#00B145' style={{ marginRight: '0.13rem' }} />
            ]}
            >精选游记
          </NavBar>
        </header>
        <div className='content' style={{backgroundColor:'#f4f4f4',}}>
          {/* 轮播图 */}
          <div className={style.banner}>
            <Banner bannerlist={this.state.bannerlist}></Banner>
          </div>
          {/* 导航栏 */}
          <Grid data={data1}
            columnNum={4}
            hasLine={false}
            itemStyle={{backgroundColor:'#f4f4f4'}}
            renderItem={dataItem => (
              <div>
                <img src={dataItem.icon} style={{ width: '0.3rem', height: '0.3rem' }} alt="" />
                <div style={{ color: 'rgba(51,51,51,1)', fontSize: '12px', marginTop: '11px' }}>
            <span>{dataItem.text}</span>
                </div>
              </div>
            )}
          />
          {/* {卡片区域 应该为变量} */}
          <div style={{ marginTop: '0.15rem', backgroundColor:'#fff',borderRadius: '15PX', padding: '0 0.15rem', marginLeft: '0.1rem',display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '3.56rem',height: '0.6rem', marginBottom: '0.16rem',}}>
              <p style={{background:'url("/images/标记.png") no-repeat left center', backgroundSize: '0.12rem', padding: '0 0.15rem',color: '#333333', fontWeight:'bold', fontSize: '0.14rem'}}>芬兰锦囊</p> 
              <p style={{background:'url("/images/查看.png") no-repeat right center', backgroundSize: '0.08rem', padding: '0 0.15rem',color: '#333333', fontWeight:'bold', opacity:0.8, fontSize: '0.12rem'}}>查看全部1本</p>
          </div>
          {/* 芬兰城市 */}
          <p className={style.fenlan}>芬兰城市</p>
          <div className={style.docs}>
            {
              this.state.fenlanlist.map(item => {
                return <img key={item.subjectid} src={item.img} alt="" />
              })
            }
          </div>
          {/* 精华游记 */}
          <p className={style.fenlan}>精华游记</p>
          <div className={style.traveldocs}>
            {
              this.state.fenlanlist.map(item => {
                // return <img key={item.subjectid} src={item.img} alt="" />
                return <Link to={{ pathname: '/sillbag/travel', state: {travelid: `${item.subjectid}`} }} onClick={()=>{
                  localStorage.setItem("id", `${item.subjectid}`)
                }} className={style.traveitem} key={item.subjectid}>
                        <img key={item.subjectid} src={item.img} alt="" />
                        <span className={style.span1}>111</span>
                        <span className={style.span2}>1111</span>
                        <p className={style.detail}>{item.title}</p>
                      </Link>
              })
            }
          </div>
          {/* 旅途问答 */}
          <p className={style.ask}>旅途问答 <span>我要提问</span></p>
          <ListView
            ref={el => this.lv = el}
            dataSource={this.state.dataSource}
            renderFooter={() => (<div style={{ padding: '0.1rem', textAlign: 'center' }}>
              {/* {this.state.isLoading ? '点击加载更多' : 'Loaded'} */}
              <span type='primary' size='small' style={{ border: 0,outline: 'none', backgroundColor: "#fff", color: '#000'}} onClick={()=>{
                this.onEndReached()
              }}>点击加载更多</span>
            </div>)}
            renderRow={row}
            renderSeparator={separator}
            className="am-list"
            pageSize={3}
            useBodyScroll
            onScroll={() => { console.log('scroll', '11111'); }}
            scrollRenderAheadDistance={500}
            // onEndReached={this.onEndReached}
            // onEndReachedThreshold={10}
          />
        </div>
      </div>
    );
  }
}

export default Com
